/* 1.登入页面上，点击注册链接。跳转到注册页面：
      1.获取去注册的超链接，绑定点击事件
      2.事件触发：1.先隐藏 登入的div；2.后显示 注册的div  
   2.在注册页面上，点击去登入的链接，跳转到登入页面。
        1.获取去登入的超链接
        2.事件触发：1.先隐藏 注册的div，2.后显示登入的div    */

// 获取dom元素
const loginA = document.querySelector('.login-a'); //登入div中的超链接
const loginDiv = document.querySelector('.login');   //登入的大盒子
const registerA = document.querySelector('.register-a'); //注册div中的超链接
const registerDiv = document.querySelector('.register');  //注册的大盒子
const registerForm = document.querySelector('.register form'); //注册div中的 form标签
const loginForm = document.querySelector('.login form');//登录中的 form标签
// 登入div 中的超链接
loginA.addEventListener("click", function () {
    // 先隐藏登入div
    loginDiv.style.display = "none"
    // 后显示 注册div
    registerDiv.style.display = "block"
})
// 注册 div中的div 添加绑定事件
registerA.addEventListener("click", function () {
    //先隐藏注册div
    registerDiv.style.display = "none"
    // 后显示登入div
    loginDiv.style.display = "block"

})

//2. 注册业务 
//  1.给注册表单绑定提交submit事件-阻止默认- form属性 autocomplete-off 关闭历史输入。
// 2.事件触发：1：获取用户名和密码；2.简单合法验证-是否为空;
// 3.合法使用axios 把用户名和密码发送给后端，完成注册。
// 4.后端响应成功，提示用户 恭喜 5 等待一会 自动切换到登入表单；6自动把用户的账号填写到登入表单的用户名中

// 注册表单 绑定提交事件
registerForm.addEventListener("submit", async function (e) {
    e.preventDefault()
    // 显示友好弹框
    // toastr.error("33标题", "33内容")
    // 显示加载
    NProgress.start();
    // 五秒后关闭
    setTimeout(() => {
        NProgress.done();

    }, 5000)
    // 获取用户名和密码
    const username = registerForm.querySelector("input[name=username]").value.trim()
    const password = registerForm.querySelector("input[name=password]").value.trim()

    // 判断是否为空
    if (!username || !password) {
        console.log(' 输入不合法，请重新输入');
        return
    }

    // 使用axios发送请求
    const result = await axios({
        url: '/api/register',
        method: 'post',
        data: {
            username,
            password,
        }
    })
    // 输出响应结果
    console.log(result);
    // 判断注册是否成功
    if (result.data.code === 0) {
        toastr.success(result.data.message, "恭喜")
        setTimeout(() => {
            // 切换显示登入表里
            registerA.click()
            // 把账号填写到登入表里，用户名标签上
            loginDiv.querySelector("input[name=username]").value = username
        }, 1500)
    }

})
// 登录业务
// 登入表单 绑定提交事件
loginForm.addEventListener("submit", async function (e) {
    // 阻止表单刷新
    e.preventDefault()
    // 获取用户名和密码
    const username = loginForm.querySelector("input[name=username]").value.trim()
    const password = loginForm.querySelector("input[name=password]").value.trim()
    // 判断是否为空
    if (!username || !password) {
        console.log(' 输入不合法，请重新输入');
        return
    }
    // 判断密码是否正确

    // 使用axios发送请求
    const result = await axios({
        url: '/api/login',
        method: 'post',
        data: {
            username,
            password,
        }
    })
    // console.log(result);
    // 判断注册是否成功
    if (result.data.code === 0) {
        // 把token 存储到本地
        localStorage.setItem("token8788", result.data.token)
        toastr.success(result.data.message, "恭喜登录成功")
        setTimeout(() => {
            // 我们打开页面 以后都要使用 open with live server 服务器的形式打开 打开方式不同根目录也不用 
            // 优先使用 相对路径   绝对路径从D盘开始找 第二次用默认浏览器打开有些路径就不对
            // location.href = "../index.html"  //ok ok
            // location.href = "index.html" //ok  ok
            location.href = "./index.html" //ok not ok
            // location.href = "../../index.html" //ok not ok
            // location.href = "../../../../../../../index.  html" // /ok not ok
        }, 1500)
    }
})